<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
             width: 150px;
            height: 50px;
            margin-top: 50px;
        }
        .le{
            float: left;
            margin-left: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<script>
    var a = [
        {
            pid:0,
            id:1,
            name:'吃饭',
            name1:'睡觉',
            children:[
                { pid:1,
                    name:'早餐',
                    name1:'睡觉',
                    children:[
                        { pid:1,
                            name:'早餐',
                            name1:'睡觉',
                            children:[
                                { pid:1,
                                    name:'早餐',
                                    name1:'睡觉',},
                                {
                                    pid: 1,
                                    name: '午餐',
                                    name1: '睡觉',
                                },
                                { pid:1,
                                    name:'晚饭',
                                    name1:'睡觉',},
                            ]},
                        {
                            pid: 1,
                            name: '午餐',
                            name1: '睡觉',
                        },
                        { pid:1,
                            name:'晚饭',
                            name1:'睡觉',},
                    ]
                },
                {
                    pid: 1,
                    name: '吃饭',
                    name1: '睡觉',
                },
                { pid:1,
                    name:'晚饭',
                    name1:'睡觉',},
            ]
        },
        {
            pid:0,
            id:2,
            name:'游戏',
            name1:'睡觉',
            children:[
                { pid:2,
                    name:'王者荣耀',
                    name1:'睡觉',},
                { pid:2,
                    name:'英雄联盟',
                    name1:'睡觉',},
                { pid:2,
                    name:'吃鸡',
                    name1:'睡觉',},
            ]},
        {
            pid:0,
            id:3,
            name:'生活',
            name1:'睡觉',
            children:[
                { pid:3,
                    name:'旅游',
                    name1:'睡觉',},
                { pid:3,
                    name:'住宿',
                    name1:'睡觉',},
                { pid:3,
                    name:'工作',
                    name1:'睡觉',},
            ]
        }
    ];
    function test(a,body) {
        for(let i=0;i<a.length;i++){
            if(a[i].children){
               var div= document.createElement('div')
                var div1= document.createElement('div')
                 insert(a[i],div1,'parent')
                div.className='parent';
               div.show=false;
                body.appendChild(div);
                var son= document.createElement('div')
                son.className='son';
                son.style.display="none"
                div.appendChild(div1)
                div.appendChild(son);
                test(a[i].children,son)
            }else{
                var sonchild=document.createElement('div');
               insert(a[i],sonchild)
                body.appendChild(sonchild)
            }
        }
    }
     var body=document.body
      test(a,body)

       test2();

    function test2() {
        var parent=document.getElementsByClassName('parent');
        for (let i=0;i<parent.length;i++){
            parent[i].onclick=test1;
        }
    }
      function test5() {
          window.event ? window.event.cancelBubble = true : e.stopPropagation();
      }
    function test1() {
             window.event ? window.event.cancelBubble = true : e.stopPropagation();
             var parent = document.getElementsByClassName('parent');
             // for (var i = 0; i < parent.length; i++) {
        //     parent[i].children[1].style.display = 'none'
        // }
             this.parentNode.style.display='block';
             if (this.show ==false) {
                 this.children[1].style.display = 'block'
                 this.show =true;
             }else if(this.show ==true){
                 this.children[1].style.display ='none'
                 this.show =false
             }
    }
    function insert(arr,div1,wl) {
        for(var item in arr ){
            if(item !='name' && item !='name1' ){
                continue;
            }
            var div2 =document.createElement('div');
            if(wl=='parent') {
                div2.innerHTML ='<a href="#">'+ arr[item] +'</a>'
            }else{
                div2.innerHTML ='<a href="#" onclick="test5()">'+ arr[item] +'</a>'
            }
            div2.className = 'le'
            div1.appendChild(div2)
        }
    }
</script>
</body>
</html>